<template>
  <div class="search">
    <div class="search-list">
      <div class="nav-table">
        <div class="long-title"><span class="all-goods">全部分类</span></div>
        <div class="nav-cont">
          <ul>
            <li class="index"><a href="#">首页</a></li>
            <li class="qc"><a href="#">闪购</a></li>
            <li class="qc"><a href="#">限时抢</a></li>
            <li class="qc"><a href="#">团购</a></li>
            <li class="qc last"><a href="#">大包装</a></li>
          </ul>
          <div class="nav-extra">
            <i class="am-icon-user-secret am-icon-md nav-user"></i><b></b>我的福利
            <i class="am-icon-angle-right" style="padding-left: 10px;"></i>
          </div>
        </div>
      </div>


      <div class="am-g am-g-fixed">
        <div class="am-u-sm-12 am-u-md-12">
          <div class="theme-popover">
            <div class="searchAbout">
              <span class="font-pale">相关搜索：</span>
              <a title="坚果" href="#">坚果</a>
              <a title="瓜子" href="#">瓜子</a>
              <a title="鸡腿" href="#">豆干</a>

            </div>
            <ul class="select">
              <p class="title font-normal">
                <span class="fl">松子</span>
                <span class="total fl">搜索到<strong class="num">997</strong>件相关商品</span>
              </p>
              <div class="clear"></div>
              <li class="select-result">
                <dl>
                  <dt>已选</dt>
                  <dd class="select-no"></dd>
                  <p class="eliminateCriteria">清除</p>
                </dl>
              </li>
              <div class="clear"></div>
              <li class="select-list">
                <dl id="select1">
                  <dt class="am-badge am-round">品牌</dt>

                  <div class="dd-conent">
                    <dd class="select-all selected"><a href="#">全部</a></dd>
                    <template v-for="brand in brands">
                      <dd><a href="#">{{brand}}</a></dd>
                    </template>

                  </div>

                </dl>
              </li>
<!--              <li class="select-list">
                <dl id="select2">
                  <dt class="am-badge am-round">种类</dt>
                  <div class="dd-conent">
                    <dd class="select-all selected"><a href="#">全部</a></dd>
                    <dd><a href="#">东北松子</a></dd>
                    <dd><a href="#">巴西松子</a></dd>
                    <dd><a href="#">夏威夷果</a></dd>
                    <dd><a href="#">松子</a></dd>
                  </div>
                </dl>
              </li>
              <li class="select-list">
                <dl id="select3">
                  <dt class="am-badge am-round">选购热点</dt>
                  <div class="dd-conent">
                    <dd class="select-all selected"><a href="#">全部</a></dd>
                    <dd><a href="#">手剥松子</a></dd>
                    <dd><a href="#">薄壳松子</a></dd>
                    <dd><a href="#">进口零食</a></dd>
                    <dd><a href="#">有机零食</a></dd>
                  </div>
                </dl>
              </li>-->

            </ul>
            <div class="clear"></div>
          </div>
          <div class="search-content">
            <div class="sort">
              <li class="first"><a title="综合">综合排序</a></li>
              <li><a title="销量">销量排序</a></li>
              <li><a title="价格">价格优先</a></li>
              <li class="big"><a title="评价" href="#">评价为主</a></li>
            </div>
            <div class="clear"></div>

            <ul class="am-avg-sm-2 am-avg-md-3 am-avg-lg-4 boxes">
              <template v-for="p in products">
                <li>
                  <div class="i-pic limit" @click="goDetail(p.productId)">
                    <img :src="p.skus[0].skuImg" v-if="p.skus[0]"/>
                    <p class="title fl">【{{ p.productName }}】<span v-if="p.skus[0]">{{ p.skus[0].skuName }}</span>包邮</p>
                    <p class="price fl">
                      <b>¥</b>
                      <strong>
                        <template v-if="p.skus[0]">{{ p.skus[0].sellPrice }}</template>
                      </strong>
                    </p>
                    <p class="number fl">
                      销量<span>{{ p.soldNum }}</span>
                    </p>
                  </div>
                </li>
              </template>
            </ul>
          </div>
          <div class="search-side">

            <div class="side-title">
              经典搭配
            </div>

            <li>
              <div class="i-pic check">
                <img src="@/assets/images/cp.jpg"/>
                <p class="check-title">萨拉米 1+1小鸡腿</p>
                <p class="price fl">
                  <b>¥</b>
                  <strong>29.90</strong>
                </p>
                <p class="number fl">
                  销量<span>1110</span>
                </p>
              </div>
            </li>
            <li>
              <div class="i-pic check">
                <img src="@/assets/images/cp2.jpg"/>
                <p class="check-title">ZEK 原味海苔</p>
                <p class="price fl">
                  <b>¥</b>
                  <strong>8.90</strong>
                </p>
                <p class="number fl">
                  销量<span>1110</span>
                </p>
              </div>
            </li>
            <li>
              <div class="i-pic check">
                <img src="@/assets/images/cp.jpg"/>
                <p class="check-title">萨拉米 1+1小鸡腿</p>
                <p class="price fl">
                  <b>¥</b>
                  <strong>29.90</strong>
                </p>
                <p class="number fl">
                  销量<span>1110</span>
                </p>
              </div>
            </li>

          </div>
          <div class="clear"></div>
          <!--分页 -->
          <el-pagination class="am-pagination am-pagination-centered"
                         background
                         layout="prev, pager, next"
                         :total="count"
                         :page-size="pageSize"
                         @next-click="next" @prev-click="prev" @current-change="pager">
          </el-pagination>
          <!--          <ul class="am-pagination am-pagination-right">-->
          <!--            <li class="am-disabled"><a href="#">&laquo;</a></li>-->
          <!--            <li class="am-active"><a href="#">1</a></li>-->
          <!--            <li><a href="#">2</a></li>-->
          <!--            <li><a href="#">3</a></li>-->
          <!--            <li><a href="#">4</a></li>-->
          <!--            <li><a href="#">5</a></li>-->
          <!--            <li><a href="#">&raquo;</a></li>-->
          <!--          </ul>-->

        </div>
      </div>
      <div class="footer">
        <div class="footer-hd">
          <p>
            <a href="#">恒望科技</a>
            <b>|</b>
            <a href="#">商城首页</a>
            <b>|</b>
            <a href="#">支付宝</a>
            <b>|</b>
            <a href="#">物流</a>
          </p>
        </div>
        <div class="footer-bd">
          <p>
            <a href="#">关于恒望</a>
            <a href="#">合作伙伴</a>
            <a href="#">联系我们</a>
            <a href="#">网站地图</a>
            <em>© 2015-2025 Hengwang.com 版权所有</em>
          </p>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import {getProductBrands, getProducts} from '@/api/search'

export default {
  name: "SearchMain",
  data() {
    return {
      categoryId: 0,
      pageNum: 1,
      pageSize: 12,
      products: [],
      count: 0,
      pageCount: 0,
      brands:[]
    }
  },
  created() {
    this.categoryId = this.$route.query.categoryId;
    this.getProducts();
    this.getProductsBrands();

  },
  methods: {
    prev() {
      if (this.pageNum > 1) {
        this.pageNum--;
      }
    },
    pager(event) {
      this.pageNum = event;
      this.getProducts();
    },
    next() {
      if (this.pageNum < this.pageCount) {
        this.pageNum++;
      }
    },
    getProducts() {
      getProducts(this.categoryId, this.pageNum, this.pageSize).then(data => {
        const res = data.data;
        if (res.success) {
          console.log(JSON.stringify(res.data))
          this.count = res.data.count;
          this.pageCount = res.data.pageCount;
          this.products = res.data.list;
        }

      }).catch(error => {
        this.$message({
          message: error,
          type: 'error'
        });
      })
    },
    getProductsBrands() {
      getProductBrands(this.categoryId).then(data => {
        const res = data.data;
        if (res.success) {
          this.brands=res.data;
        }

      }).catch(error => {
        this.$message({
          message: error,
          type: 'error'
        });
      })
    },
    goDetail(productId) {
      this.$router.push({
        path: '/detail',
        query: {
          pid: productId
        }
      })
    }
  }
}
</script>

<style scoped>

</style>